<template>
  <md-page title="举报">
    <view class="container">
      <view class="report-buttons">
        <view 
          class="report-btn" 
          v-for="item in reportTypes" 
          :key="item.key"
          @click="handleReport(item)">
          <view class="btn-icon">{{ item.icon }}</view>
          <view class="btn-text">{{ item.name }}</view>
        </view>
      </view>
    </view>
  </md-page>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';

const reportTypes = reactive([
  {
    key: 'cheat',
    name: '比赛作弊',
    icon: '🚫',
  },
  {
    key: 'bad_words',
    name: '不良言论',
    icon: '💬',
  },
  {
    key: 'invalid_name',
    name: '违规队名',
    icon: '📝',
  },
]);

const handleReport = (item: { key: string; name: string }) => {
  if (item.key === 'cheat') {
    // 跳转到比赛作弊举报页面
    uni.navigateTo({
      url: '/pages/report/cheat',
    });
  } else if (item.key === 'bad_words' || item.key === 'invalid_name') {
    // 跳转到不良言论举报页面（违规队名也跳转到这里）
    uni.navigateTo({
      url: `/pages/report/bad-words?type=${item.key}`,
    });
  } else {
    // 其他举报类型暂时显示提示
    uni.showModal({
      title: '确认举报',
      content: `您确定要举报"${item.name}"吗？`,
      success: (res) => {
        if (res.confirm) {
          // TODO: 调用举报接口
          uni.showToast({
            title: '举报成功',
            icon: 'success',
            duration: 2000,
          });
        }
      },
    });
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
}

.report-buttons {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
  margin-top: 40rpx;
}

.report-btn {
  display: flex;
  align-items: center;
  padding: 40rpx 30rpx;
  background: #ffffff;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
  
  &:active {
    background: #f5f5f5;
    transform: scale(0.98);
  }
}

.btn-icon {
  font-size: 48rpx;
  margin-right: 30rpx;
  width: 80rpx;
  text-align: center;
}

.btn-text {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
  flex: 1;
}
</style>

